<template>
  <div id="order">
    <div class="title">
      <div class="title-time">
        <img @click="$router.go(-1)" src="../../assets/img/fanhui.png" alt />
        <div>
          <p>B01</p>
          <p>06-10 14:00</p>
        </div>
      </div>
      <div class="title-game">
        <div>
          <span>Joy Dream</span>
          <img src="../../assets/img/02.png" alt />
        </div>
        <div>
          <img src="../../assets/img/yinxionglianmeng.png" alt />
        </div>
        <div>
          <img src="../../assets/img/02.png" alt />
          <span>Joy Dream</span>
        </div>
      </div>
      <div></div>
    </div>
    <div class="content nui-scroll">
      <div class="content-left nui-scroll">
        <div class="content-left-type">
          <div @click="changeType(1)" :class="[gameType==1?'types-active':'']">
            <img v-if="gameType==1" src="../../assets/img/suoyoupankou xuanzhong.png" alt />
            <img v-else src="../../assets/img/suoyoupankou.png" alt />
            <span>所有盘口</span>
          </div>
          <div @click="changeType(2)" :class="[gameType==2?'types-active':'']">
            <img v-if="gameType==2" src="../../assets/img/bisaipankou xuanzhong.png" alt />
            <img v-else src="../../assets/img/bisaipankou.png" alt />
            <span>比赛盘口</span>
          </div>
          <div @click="changeType(3)" :class="[gameType==3?'types-active':'']">
            <img v-if="gameType==3" src="../../assets/img/tebiepankou xuanzhong.png" alt />
            <img v-else src="../../assets/img/tebiepankou.png" alt />
            <span>特别盘口</span>
          </div>
          <div @click="changeType(4)" :class="[gameType==4?'types-active':'']">
            <img v-if="gameType==4" src="../../assets/img/daxiaopan xuanzhong.png" alt />
            <img v-else src="../../assets/img/daxiaopan.png" alt />
            <span>大小盘</span>
          </div>
        </div>
        <div class="content-left-match">
          <div v-for="v in 3" :key="v" class="match">
            <div class="match-title">
              <div>第一局</div>
              <div @click="open($event)">
                <span>80</span>
                <img src="../../assets/img/xiajiantou.png" alt />
              </div>
            </div>
            <div class="match-contain">
              <div class="one">
                <div v-for="v in 3" :key="v" class="one-list">
                  <div>
                    <span>Joy Dream</span>
                    <img src="../../assets/img/02.png" alt />
                    <span class="bluebtn">1.749</span>
                  </div>
                  <div>第一局胜利</div>
                  <div>
                    <span class="redbtn">1.749</span>
                    <img src="../../assets/img/02.png" alt />
                    <span>Joy Dream</span>
                  </div>
                </div>
              </div>
              <div class="two">
                <div class="two-title">
                  <p>第 三 局正确比分 (不含加时赛)</p>
                </div>
                <ul class="two-list">
                  <li>
                    <span>15:15</span>
                    <span class="greenbtn">7.757</span>
                  </li>
                  <li>
                    <span>15:15</span>
                    <span class="greenbtn">7.757</span>
                  </li>
                  <li>
                    <span>15:15</span>
                    <span class="greenbtn">7.757</span>
                  </li>
                </ul>
              </div>
              <div class="one three">
                <div v-for="v in 3" :key="v" class="one-list">
                  <div>
                    <span>Joy Dream</span>
                    <img src="../../assets/img/02.png" alt />
                    <span class="bluebtn">1.749</span>
                  </div>
                  <div>第一局胜利</div>
                  <div>
                    <span class="redbtn">1.749</span>
                    <img src="../../assets/img/02.png" alt />
                    <span>Joy Dream</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="messages">
          <div class="team">
            <div>
              <img src="../../assets/img/02.png" alt />
            </div>
            <div>
              <img src="../../assets/img/game3.png" alt />
              <p>LDL 2020夏季赛</p>
              <p>06-15 14:25</p>
            </div>
            <div>
              <img src="../../assets/img/03.png" alt />
            </div>
          </div>
          <div class="name">
            <div>Joy Dream</div>
            <div>Bilibili Gaming Junior</div>
          </div>
        </div>
        <div class="pay">
          <div class="pay-title">
            <span>下单</span>
          </div>
          <div class="line">
            <div>
              <span>战队</span>
              <img src="../../assets/img/02.png" alt />
              <span>Joy Dream</span>
            </div>
            <div>比赛日期：2020-06-15</div>
          </div>
          <div class="line">
            <div>
              <span>盘口</span>
              <span>第四局胜利</span>
            </div>
            <div>赔率：1.465</div>
          </div>
          <div class="money">
            <div>下注金额</div>
            <div class="choose">
              <div>
                <div class="input">
                  <input type="text" name id />
                  <span>USDT</span>
                </div>
                <span>
                  <p>1/3</p>
                  <p>上限</p>
                </span>
                <span>
                  <p>1/3</p>
                  <p>上限</p>
                </span>
                <span>
                  <p>1/3</p>
                  <p>上限</p>
                </span>
                <span>
                  <p>上限</p>
                </span>
              </div>
              <p>最少注码：5 下注上限：1000</p>
            </div>
          </div>
          <div class="p-btn">
            <div>
              <span>预期获利：</span>
              <span>0.00 USDT</span>
            </div>
            <div>
              <img src="../../assets/img/bisai bai.png" alt />
              <span>确认下单</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 交易确认窗口 -->
    <el-dialog title="下单成功" width="600px" :visible.sync="submit">
      <div class="submit">
        <div class="title">
        <img src="../../assets/img/02.png" alt />
        <span>LPL 2020夏季赛</span>
      </div>
      <ul class="message">
        <li>
          <span>总下注金额</span>
          <span>300.00 USDT</span>
        </li>
        <li>
          <span>赔率</span>
          <span>1.396</span>
        </li>
        <li>
          <span>预期获利</span>
          <span>330 USDT</span>
        </li>
        <li>
          <span>战队</span>
          <span>
            <img src="../../assets/img/02.png" alt="">
            Joy Dream
          </span>
        </li>
        <li>
          <span>盘口</span>
          <span>第四局胜利</span>
        </li>
      </ul>
      <div class="name">
        <span></span>
        <span>Joy Dream VS Bilibili Gaming Junior</span>
      </div>
      <div class="btn">继续下注</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  name: "order",
  data() {
    return {
      gameType: 1,
      submit: true
    };
  },
  methods: {
    changeType(val) {
      this.gameType = val;
      // console.log(this.gameType);
    },
    open(el) {
      var num = 1;
      $(el.target)
        .parents(".match-title")
        .siblings(".match-contain")
        .slideToggle(500);
    }
  }
};
</script>
<style lang='less' scope>
@import url("../../assets/css/comm.css");
#order {
  > .title {
    height: 77px;
    background-color: #252a48;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    > .title-time {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #fff;
      position: absolute;
      left: 20px;
      > img {
        width: 30%;
      }
      > div {
        font-size: 14px;
        margin-left: 15px;
        > p:nth-child(1) {
          color: #ebd2ab;
        }
      }
    }
    > .title-game {
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: url("../../assets/img/pk.png") no-repeat;
      height: 100%;
      width: 1000px;
      > div:nth-child(2) {
        padding-bottom: 20px;
      }
      > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #ebd2ab;
        > img {
          margin: 0 10px;
        }
      }
    }
  }
  > .content {
    display: flex;
    justify-content: space-around;
    background-color: #151a36;
    padding: 10px;
    height: 85vh;
    overflow-y: scroll;
    > .content-left {
      width: 49%;
      height: 100%;
      overflow-y: scroll;
      border-radius: 15px 15px 0 0;
      background-color: #252a48;
      > .content-left-type {
        display: flex;
        justify-content: flex-start;
        background-image: linear-gradient(#252a48, #30365a);
        border-bottom: 2px solid #49517e;
        > div {
          height: 55px;
          width: 25%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          color: #8990c5;
          font-size: 14px;
          padding: 0 15px;
          cursor: pointer;
          > span {
            margin: 0 10px;
          }
        }
      }
      > .content-left-match {
        padding: 0 10px;
        .match {
          font-size: 15px;
          color: #fff;
          > .match-title {
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(
              to right,
              #23416f,
              #30375c,
              #6b2150
            );
            border-radius: 10px;
            overflow: hidden;
            margin: 15px 0 0;
            position: relative;
            height: 50px;
            > div:nth-child(2) {
              position: absolute;
              right: 0;
              top: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              height: 50px;
              width: 100px;
              background-color: #a8205d;
              > img {
                margin: 0 10px;
              }
            }
          }
          > .match-contain {
            display: none;
            > .one {
              .one-list {
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-image: linear-gradient(
                  to right,
                  #23416f,
                  #30375c,
                  #6b2150
                );
                margin-top: 15px;
                height: 50px;
                border-radius: 10px;
                > div {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  > img {
                    margin: 0 30px;
                  }
                }
              }
            }
            > .two {
              margin: 15px 0;
              border: 1px solid #383e69;
              border-radius: 10px 10px 0 0;
              overflow: hidden;
              > .two-title {
                background-image: linear-gradient(
                  to right,
                  #23416f,
                  #30375c,
                  #6b2150
                );
                padding: 10px;
                > p {
                  font-size: 14px;
                  border-left: 4px solid #fff;
                  padding-left: 10px;
                }
              }
              > .two-list {
                padding: 10px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                > li {
                  width: 49%;
                  background-image: linear-gradient(to right, #30365a, #2a3a60);
                  border: 1px solid #383e69;
                  border-radius: 4px;
                  padding: 10px;
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 15px;
                }
              }
            }
          }
        }
      }
    }
    > .content-right {
      width: 49%;
      > .messages {
        height: 337px;
        background: url("../../assets/img/beijing.png") no-repeat center center;
        background-size: cover;
        position: relative;
        .team {
          display: flex;
          justify-content: space-around;
          padding-top: 100px;
          > div:nth-child(2) {
            text-align: center;
            p:nth-child(2) {
              font-size: 18px;
              color: #ebd2ab;
              margin: 10px 0;
            }
            p:nth-child(3) {
              color: #fff;
              font-size: 14px;
            }
          }
          > div:nth-child(1),
          div:nth-child(3) {
            width: 106px;
            height: 106px;
            background: url("../../assets/img/yuanxing.png") no-repeat;
            text-align: center;
            line-height: 106px;
          }
        }
        > .name {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          display: flex;
          justify-content: space-between;
          > div {
            width: 303px;
            height: 80px;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-size: 16px;
          }
          > div:nth-child(1) {
            background: url("../../assets/img/right.png") no-repeat;
            background-size: 100%;
          }
          > div:nth-child(2) {
            background: url("../../assets/img/you.png") no-repeat;
            background-size: 100%;
          }
        }
      }
      > .pay {
        background-color: #151a36;
        margin-top: 20px;
        >.pay-title {
          background-image: linear-gradient(#30365a, #252a48);
          height: 50px;
          color: #fff;
          line-height: 50px;
          font-weight: bold;
          padding: 0 0 0 20px;
          font-size: 16px;
          border-bottom: 2px solid #49517e;
        }
        >.line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0 20px;
          border-bottom: 1px solid #2f365a;
          padding: 20px 0;
          color: #fff;
          font-size: 14px;
          > div:nth-child(1) {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span:nth-child(1) {
              margin-right: 30px;
              color: #ebd2ab;
            }
            img {
              margin-right: 10px;
            }
          }
        }
        >.money {
          display: flex;
          justify-content: flex-start;
          border-bottom: 1px solid #2f365a;
          margin: 0 20px;
          padding: 20px 0;
          > div:nth-child(1) {
            color: #ebd2ab;
            font-size: 14px;
            margin-right: 30px;
          }
          > .choose {
            > div:nth-child(1) {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              > .input {
                border: 1px solid #ae9765;
                border-radius: 4px;
                padding: 10px;
                color: #ae9765;
                font-size: 14px;
                margin-right: 20px;
                > input {
                  max-width: 60px;
                  outline: none;
                  background-color: #151a36;
                  border: 0;
                  color: #fff;
                }
              }
              > span {
                font-size: 12px;
                color: #fff;
                display: inline-block;
                width: 60px;
                height: 40px;
                text-align: center;
                background-color: #252a48;
                border: 1px solid #49517e;
                border-radius: 4px;
                padding-top: 5px;
                margin-right: 10px;
              }
              > span:last-child {
                padding-top: 12px;
              }
            }
            > p {
              font-size: 14px;
              color: #8990c5;
              margin: 10px 0 0;
            }
          }
        }
        >.p-btn {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          border-bottom: 1px solid #2f365a;
          > div:nth-child(1) {
            color: #fff;
            font-size: 12px;
            span:nth-child(1) {
              color: #ebd2ab;
            }
          }
          > div:nth-child(2) {
            padding: 10px 100px;
            background-image: linear-gradient(to right, #cfa66e, #fbe0b8);
            display: flex;
            align-items: center;
            border-radius: 4px;
            font-size: 14px;
            color: #fff;
            img {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
  .submit {
    background-color: #252a48;
    >.title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 15px;
      > span {
        margin-left: 10px;
        font-size: 15px;
        color: #fff;
      }
    }
    >.message {
      margin: 10px 0;
      > li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        padding: 15px 0;
        border-bottom: 1px solid #2f365a;
        > span:nth-child(1) {
          color: #8990c5;
        }
        > span:nth-child(2) {
          color: #ebd2ab;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          >img{
            margin-right: 10px;
          }
        }
      }
    }
    >.name {
      color: #fff;
      span:nth-child(1) {
        border: 2px solid #ebd2ab;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
    }
    >.btn {
      width: 100%;
      margin: 20px 0 10px;
      padding: 10px 0;
      background-image: linear-gradient(to right, #cfa66e, #fbe0b8);
      text-align: center;
      border-radius: 4px;
      font-size: 14px;
      color: #fff;
    }
  }
}
// --------------------------------------------------
.types-active {
  color: #cfa66e !important;
  border-bottom: 4px solid #cfa66e;
  background: linear-gradient(#175f68 5%, #252a48 95%) !important;
}
.bluebtn {
  display: inline-block;
  width: 80px;
  height: 30px;
  background-color: #2076a8;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #2076a8;
  cursor: pointer;
}
.bluebtn:hover {
  border: 1px solid #ebd2ab;
}
.redbtn {
  display: inline-block;
  width: 80px;
  height: 30px;
  background-color: #a8205d;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #a8205d;
  cursor: pointer;
}
.redbtn:hover {
  border: 1px solid #ebd2ab;
}
.greenbtn {
  display: inline-block;
  width: 80px;
  height: 30px;
  background-image: linear-gradient(#15b6aa, #0a9187);
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #0a9187;
  cursor: pointer;
}
.greenbtn:hover {
  border: 1px solid #ebd2ab;
}
// ------------------------------
#order {
.el-dialog__headerbtn {
  border: 1px solid #ebd2ab;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  top: 10px;
  > i {
    color: #ebd2ab !important;
  }
}
.el-dialog__header {
  background-image: linear-gradient(#30365a, #252a48) !important;
  padding: 10px !important;
  border-bottom: 2px solid #49517e;
}
.el-dialog__title {
  color: #fff;
  font-size: 15px;
  padding-left: 10px;
}
.el-dialog__title::before {
  content: "";
  width: 30px;
  height: 30px;
  float: left;
  background: url("../../assets/img/chenggong.png") no-repeat center center;
  background-size: 80%;
}
.el-dialog__body {
  padding: 15px 20px;
}
.el-dialog {
  border: 2px solid #ebd2ab;
  border-radius: 10px;
  background-color: #252a48;
  overflow: hidden;
}

}


</style>